<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>教师列表页</title>
<link href="/Public/css/maint.css" type="text/css" rel="stylesheet" />
<link href="/Public/css/fontpic.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/main.js"></script>
<script type="text/javascript" src="/Public/js/common.js"></script>
<script type="text/javascript">
	$(function() {
		/*瀑布流开始*/
		var container = $('#ulWaterfall');
		var loading = $('#imloading');
		// 初始化loading状态
		loading.data("on", true);				
		/*模拟从后台获取到的数据*/
		var sqlJson = [];
		 var load = function(sqlJson) {
			 console.log( sqlJson );
			if ( sqlJson.size <= 0 ) {
				loading.text('只有这么多了！');
			} else {
				var html = "";
				for (var i in sqlJson.datas ) {
					html +="<li class='item'><a href='"+"/show/detail/"+sqlJson.datas[i].id+"' target='_blank'><img src='" + sqlJson.datas[i].pic + "'></a>";
					html +="<div class='workName'>"+sqlJson.datas[i].name+"</div>";
					html +="<div class='authorName'><span class='spanName'>"+sqlJson.datas[i].author_name+"</span>";
					html +="<span class='spanHeart'><span class='fa fa-fw fa-heart'></span>"+sqlJson.datas[i].votes+"</span></div>";
					html +="<div class='divNum'><span class='spanLike'>"+"排名："+sqlJson.datas[i].rank+"</span>";
					html +="<span class='spanNum'>"+"编号："+sqlJson.datas[i].id+"</span></div>";
					html +="<div class='workSchool'>"+"学校："+sqlJson.datas[i].school+"</div>";
					html +="<div class='divPraise'><a href='photodetail.html'><div class='like'>给TA点赞</div></a></div></li>";	
				}
				var time = setTimeout(function() {
					var $newElems = $(html).css({
						opacity: 0.8
					}).appendTo(container);
					$newElems.imagesLoaded(function() {
						$newElems.animate({
							opacity: 1
						}, 10);	
						container.masonry('appended', $newElems, true);
						loading.data("on", true).fadeOut();
						clearTimeout(time);
					});
				}, 10)
			}
		};
	
		common.teacher.fetchStudentsJson( {}, load );
		
		$(window).scroll(function() { 
			if (!loading.data("on")) return;
			
			var itemNum = $('#waterfull').find('.item').length;
			var itemArr = [];
			itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			var maxTop = Math.max.apply(null, itemArr);
			if (maxTop < $(window).height() + $(document).scrollTop()) {
				//加载更多数据
				loading.data("on", false).fadeIn();
				common.teacher.fetchStudentsJson( {}, load );
			}
		});
	})
</script>
</head>	
<body style="background-color:#f2f2f2;" class="bot50">
<!-------------header------------------------->
<include file="Tpl/header" />
<!-------------header END------------------------->
<!-------------main------------------------->
<div id="main">
	<div class="h1Teacher">{$user['name']} 排名{$user['rank']}名</div>
    <p class="pTeacher">指导作品总计{$user['counts']}幅，累计投总数{$user['polls']}票</p>
    <h1 class="teacherTitle">指导作品</h1>
	<!-------------waterfall---------------------------->
    <div class="content">
    	<div class="waterFallBox" id="waterfull">
            <ul id="ulWaterfall">
                
            </ul>
    	</div>
    	<div id="imloading" class="loading">加载中</div>
    </div>
	<!-------------waterfall END------------------------->
    <!-------------作品人气榜------------------------->
</div>
<!-------------main END------------------------->
<!-------------botNav------------------------>
<include file="Tpl/footer" />
<!-------------botNav END------------------------->
</body>
</html>